<template>
  <div>
    Home
  </div>
</template>
<script lang="ts" setup>
import { reactive, toRaw } from 'vue'
import { Form } from 'ant-design-vue'

import {Skeleton,SkeletonList} from "@/components/basic/Loading"

const useForm = Form.useForm

const labelCol = { span: 4 }
const wrapperCol = { span: 14 }

const modelRef = reactive({
  name: '',
  sub: {
    name: ''
  }
})
const { resetFields, validate, validateInfos } = useForm(
  modelRef,
  reactive({
    name: [
      {
        required: true,
        message: 'Please input name'
      }
    ],
    'sub.name': [
      {
        required: true,
        message: 'Please input sub name'
      }
    ]
  })
)
const onSubmit = () => {
  validate()
    .then(res => {
      console.log(res, toRaw(modelRef))
    })
    .catch(err => {
      console.log('error', err)
    })
}
const reset = () => {
  resetFields()
}
</script>

